<template>
  <div class="warp">
    <div class="content">
      <div class="minTitle">
        <div class="flag"></div>
        <div class="text">审核项目修改</div>
        <div class="close" @click="$router.go(-1)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="formContainer">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="起止时间:">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="开始时间"
                v-model="sizeForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="结束时间"
                v-model="sizeForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="派遣单位：">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="执行任务国家：">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="任务类型:">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="附件资料:">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()">新增</el-button>
            <el-button type="primary">保存</el-button>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      sizeForm: {
        date1: ""
      }
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      console.log("submit!");

      function Parent() {
        this.name = "parent";
        this.arr = [1, 2, 3, 4];
      }
      Parent.prototype.say = function() {
        console.log("say");
      };
      function Child(age) {
        Parent.call(this);
        this.age = age;
      }
      Child.prototype = Object.create(Parent.prototype);
      Child.prototype.constructor = Child;
      var c = new Child(12);
      //将child挂载到原型链上，然后创建一个Parent对象，然后在原型链上构造一个child对象，将child的值赋予c，
      //原型链上可以直接创建对象，也可以直接构造一个对象
      console.log(c.name); //输出parent
      c.say(); //输出say
      console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
      console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}
    }
  }
};
</script>

<style scoped>
.warp {
  display: flex;
}
.content {
  width: 82%;
  max-height: 520px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
  border-radius: 5px;
  overflow: hidden;
  margin-right: 10px;
  position: relative;
}
.minTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #31478f0d;
  padding: 14px 0px;
  border-top: solid 1px #f3f3f3;
  position: relative;
}
.minTitle > .flag {
  width: 3px;
  background: #31478f;
  margin: auto 22px;
  height: 18px;
}
.minTitle > .text {
  color: #31478f;
  font-weight: bold;
  font-size: 17px;
}

.close {
  position: absolute;
  right: 0px;
  padding: 0px 18px;
  cursor: pointer;
}
.close > i {
  font-size: 28px;
  font-weight: bold;
}

.el-form-item {
  align-items: center;
  width: 30%;
}

.formContainer {
  display: flex;
  padding: 20px 0 0 20px;
}
.el-input {
  width: 150px !important;
}
</style>